<template>
	<view class="container">
		<view class="top">
			<view class="title">核销记录</view>
			<!-- 搜索框 -->
			<view class="search-box">
				<u-search class="search" :animation="false" placeholder="请输入需要搜索的内容" v-model="searchQuery" />
			</view>
		</view>

		<view class="body">
		    <view class="sales-records">
		        <view v-for="(item, index) in filteredRecords" :key="index" class="record-item">
		            <view class="item-title">{{ item.title }}</view>
		            <view class="item-detail">
		                <view>下单用户：{{ item.customer }}</view>
		                <view>支付金额：￥ {{ item.amount }}</view>
		                <view style="color: #808080;">核销时间：{{ item.verificationTime }}</view>
		            </view>
		        </view>
		    </view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchQuery: '',
				records: [{
						title: '普通洗车，机油，工时',
						customer: '张三',
						amount: 32.00,
						verificationTime: '2022-10-12 11:09'
					},
					{
						title: '普通洗车，机油，工时',
						customer: '张三',
						amount: 32.00,
						verificationTime: '2022-10-12 11:09'
					},

				]
			};
		},
		computed: {

			filteredRecords() {
				return this.records.filter(record =>
					record.title.includes(this.searchQuery) ||
					record.customer.includes(this.searchQuery)
				);
			}
		}
	};
</script>

<style scoped>
	.top {
		height: 300rpx;
		width: 100%;
		background-color: #3385fd;
		padding-top: 30px;
	}

	.title {
		width: 100%;
		color: #fff;
		font-size: 33rpx;
		text-align: center;
	}

	.search-box {
		margin-top: 20px;
	}

	.search {
		width: 80%;
		padding-left: 10%;
	}

	.body {
		position: relative;
		margin: 0 auto;
		width: 98%;
		top: -80px;
		height: 100vh;
		border-radius: 28px;
		background-color: white;
		box-sizing: border-box;
	}

	.container {
		padding: 20px;
		background-color: #f8f8f8;
	}

	.sales-records {
		padding: 10px;
		border-radius: 8px;
	}

	.record-item {
		background-color: #fff;
		margin-bottom: 12px;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.item-title {
		font-size: 18px;
		font-weight: bold;
		color: #3183FB;
		margin-bottom: 8px;
		border-bottom: 2px solid #f0f0f0;
	}

	.item-detail {
		font-size: 14px;
		color: #000;
	}

	.item-detail view {
		margin-bottom: 4px;
	}
</style>